<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="system"></ion-back-button>
    </ion-buttons>
    <ion-title>Sideload Service</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-text-center with-widgets">
  <!-- file upload -->
  <div
    *ngIf="!toUpload.file; else fileUploaded"
    class="drop-area"
    [class.drop-area_mobile]="isMobile"
    appDnd
    (onFileDropped)="handleFileDrop($event)"
  >
    <ion-icon
      name="cloud-upload-outline"
      color="dark"
      style="font-size: 42px"
    ></ion-icon>
    <h4>Upload .s9pk package file</h4>
    <p *ngIf="onTor">
      <ion-text color="success">
        Tip: switch to LAN for faster uploads.
      </ion-text>
    </p>
    <ion-button color="primary" type="file" class="ion-margin-top">
      <label for="upload-photo">Browse</label>
      <input
        type="file"
        style="position: absolute; opacity: 0; height: 100%"
        id="upload-photo"
        (change)="handleFileInput($event)"
      />
    </ion-button>
  </div>
  <!-- file uploaded -->
  <ng-template #fileUploaded>
    <div class="drop-area_filled">
      <h4>
        <ion-icon
          *ngIf="uploadState?.invalid"
          name="close-circle-outline"
          color="danger"
          class="inline"
        ></ion-icon>
        <ion-icon
          *ngIf="!uploadState?.invalid"
          class="inline"
          name="checkmark-circle-outline"
          color="success"
        ></ion-icon>
        {{ uploadState?.message }}
      </h4>
      <div class="box" *ngIf="toUpload.icon && toUpload.manifest">
        <div class="card">
          <div class="row row_end">
            <ion-button
              style="
                --background-hover: transparent;
                --padding-end: 0px;
                --padding-start: 0px;
              "
              fill="clear"
              size="small"
              (click)="clearToUpload()"
            >
              <ion-icon slot="icon-only" name="close" color="danger"></ion-icon>
            </ion-button>
          </div>
          <div class="row">
            <img
              [alt]="toUpload.manifest.title + ' Icon'"
              [src]="toUpload.icon | trustUrl"
            />
            <h2>{{ toUpload.manifest.title }}</h2>
            <p>{{ toUpload.manifest.version | displayEmver }}</p>
          </div>
        </div>
      </div>
      <ion-button
        *ngIf="!toUpload.icon && !toUpload.manifest; else uploadButton"
        color="primary"
        (click)="clearToUpload()"
      >
        Try again
      </ion-button>
      <ng-template #uploadButton>
        <ion-button color="primary" (click)="handleUpload()">
          Upload & Install
        </ion-button>
      </ng-template>
    </div>
  </ng-template>
</ion-content>
